<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Несколько примеров использования JavaScript-библиотеки jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="Gennady A. Samkov" />
<meta name="email" content="smkv@mail.ru" />
<meta name="domain" content="linkexchanger.su" />
<meta name="robots" content="noindex" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<style type="text/css">
* {
    margin:0;
    padding:0;
}
html, body {
    background-color:#fff;
    font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
}

#jq_content {
  position:relative;
  background-color:#EFFBFF;
}
.jq_span {
  font-weight:bold;
  font-size:1.2em;
}
.jq_button {
  font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size:0.9em;
}
.jq_step {
  padding:10px;
  /*border:1px dotted #F00;*/
}
.jq_title {
  margin-top:20px;
  text-align:center;
  font-weight:bold;
  cursor:pointer;
}
.jq_comment {
  margin-bottom:20px;
  border-bottom:1px dotted blue;
}

#jq_step2 {
  display:none;
}
#jq_step3 {
  display:none;
}
#jq_step4 {
  display:none;
}
#jq_step5 {
  display:none;
}
#jq_step6 {
  display:none;
}
#jq_step7 {
  display:none;
}
.jq_blueText {
  background-color:#BBE9FF;
  color:#00F;
  cursor:pointer;
}
.jq_highlight {
  background-color:yellow;
  color:red;
  cursor:pointer;
}
#jq_multiple {
  width:300px;
  height:100px;
  font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
#jq_step5 ul {
  margin-left:100px;
  padding-left:0;
}
#jq_step7 div {
  background-color:#bca; 
  width:200px;
  height:1.1em;
  text-align:center;
  border:2px solid green;
  margin:3px;
  font-size:14px;
}
</style>

<body>
<!-- css и javascript-коды специально размещены непосредственно на странице. -->
<div id="jq_content">
  <div class="jq_step" id="jq_step1">
    <p class="jq_title" id="jq_title1">Щелкните мышью по этой надписи чтобы начать</p>
  </div>
  <div class="jq_step" id="jq_step2">
    <p class="jq_comment">Пощелкайте мышью по строчкам и Вы увидите как работает <span class="jq_span">toggleClass</span></p>
    <p class="jq_blueText">Это может быть обычный параграф или строка таблицы</p>
    <p class="jq_blueText">Второй параграф или строка таблицы</p>
    <p class="jq_blueText jq_highlight">Параграф или третья строка таблицы</p>
    <p class="jq_blueText">Еще один параграф, а может и строка</p>
    <p class="jq_blueText">Последний параграф или последняя строка в таблице</p>
    <p class="jq_title" id="jq_title2">Щелкните здесь мышью чтобы продолжить</p>
  </div>
  <div class="jq_step" id="jq_step3">
    <p class="jq_comment">Отметьте в этом списке одну или несколько (Ctrl+click) строк и получите их значения в строке, чтобы увидеть как работает <span class="jq_span">val()</span></p>
    <select id="jq_multiple" multiple="multiple">
      <option>Апельсин</option>
      <option selected="selected">Банан</option>
      <option>Груша</option>
      <option>Ежевика</option>
      <option>Крыжовник</option>
      <option>Слива</option>
      <option>Яблоко</option>
    </select>
    <div id="jq_multipleResult" style="color:blue;"></div>
    <p class="jq_title" id="jq_title3">Щелкните здесь мышью чтобы продолжить</p>
  </div>
  <div class="jq_step" id="jq_step4">
    <p class="jq_comment">Щелкайте мышкой по квадратам (элементы DIV) и получайте значения цвета для каждого элемента, чтобы увидеть как работает <span class="jq_span">css(name)</span></p>
      <div style="background-color:blue; width:60px; height:60px; margin:5px; float:left;"></div>
      <div style="background-color:rgb(15,99,30); width:60px; height:60px; margin:5px; float:left;"></div>
      <div style="background-color:#123456; width:60px; height:60px; margin:5px; float:left;"></div>
      <div style="background-color:#f11; width:60px; height:60px; margin:5px; float:left;"></div>
      <div id="jq_colorDivResult" style="clear:both"></div>
    <p class="jq_title" id="jq_title4">Щелкните здесь мышью чтобы продолжить</p>
  </div>
  <div class="jq_step" id="jq_step5">
    <p class="jq_comment">Проведите мышкой над списком.Так работает <span class="jq_span">hover(over,out)</span></p>
      <ul>
        <li>Пиво</li>
        <li>Водка</li>
        <li>Вино</li>
        <li>Коньяк</li>
      </ul>
    <p class="jq_title" id="jq_title5">Щелкните здесь мышью чтобы продолжить</p>
  </div>
  <div class="jq_step" id="jq_step6">
    <p class="jq_comment">Нажмите несколько раз на кнопку. Вы увидете как скрывается и отображается параграф текста. Так работает <span class="jq_span">slideToggle</span></p>
      <button class="jq_button">Нажимайте здесь!</button>
      <p id="jq_toggleP">Проведенное недавно мной небольшое социологическое исследование показало, что в девяти случаях из десяти на вопрос "Сколько будет 10 раз по 100 грамм?" 9 человек уверенно отвечают ЛИТР, и только один отвечает КИЛОГРАММ.<br />Вчера мы пили водку. Потом водка кончилась, и мы сбегали за пивом. Пили пиво, а после, когда и пиво кончилось, оказалось, что у друга оставался коньяк. И мы стали пить коньяк. А потом я отравился овсяным печеньем...</p>
    <p class="jq_title" id="jq_title6">Щелкните здесь мышью чтобы продолжить</p>
  </div>
  <div class="jq_step" id="jq_step7">
    <p class="jq_comment">Нажмайте на кнопки. Вы увидете как работает <span class="jq_span">animate()</span></p>
      <button class="jq_button" id="jq_go1">» Анимация Блока 1</button>
      <button class="jq_button" id="jq_go2">» Анимация Блока 2</button>
      <button class="jq_button" id="jq_go3">» Анимировать все</button>
      <button class="jq_button" id="jq_go4">» Сбросить</button>
      <div id="jq_block1">Блок 1</div>
      <div id="jq_block2">Блок 2</div>
    <p class="jq_title" id="jq_title7">Еще разок все сначала?</p>
  </div>

</div>

<script type="text/javascript">
  $(document).ready(function(){
  	
  	// Этот код был намеренно упрощен для
  	// лучшего понимания принципов работы примера.
  	
  	// -----------------------------
  	$("#jq_title1").click(
        function () {
          $("#jq_step1").hide("slow");
          $("#jq_step2").show("slow");
    });
  	// -----------------------------
  	$("p.jq_blueText").click(function () {
      $(this).toggleClass("jq_highlight");
      //alert($(this).text());
    });
  	// -----------------------------
    $("#jq_title2").click(
        function () {
          $("#jq_step2").hide("slow");
          $("#jq_step3").show("slow");
    });
    // -----------------------------
    function displayVals() {
      var multipleValues = $("#jq_multiple").val() || [];
      $("#jq_multipleResult").html("<b>Вы выбрали:</b> " + multipleValues.join(", "));
    }
    $("#jq_multiple").change(displayVals);
    displayVals();
    // -----------------------------
    $("#jq_title3").click(
        function () {
          $("#jq_step3").hide("slow");
          $("#jq_step4").show("slow");
    });
    // -----------------------------
    $("#jq_step4 div").click(function () {
      var color = $(this).css("background-color");
      $("#jq_colorDivResult").html("Этот элемент DIV имеет цвет <span style='color:" + color + ";'>" + color + "</span>.");
    });
    // -----------------------------
    $("#jq_title4").click(
        function () {
          $("#jq_step4").hide("slow");
          $("#jq_step5").show("slow");
    });
    // -----------------------------
    $("#jq_step5 li").hover(
      function () {
        $(this).append($("<em> <<<<<<<<<<<< </em>"));
      }, 
      function () {
        $(this).find("em:last").remove();
      }
    );
    // -----------------------------
    $("#jq_title5").click(
        function () {
          $("#jq_step5").hide("slow");
          $("#jq_step6").show("slow");
    });
    // -----------------------------
    $("#jq_step6 button").click(function () {
      $("#jq_toggleP").slideToggle("slow");
    });
    // -----------------------------
    $("#jq_title6").click(
        function () {
          $("#jq_step6").hide("slow");
          $("#jq_step7").show("slow");
    });
    // -----------------------------
    $("#jq_go1").click(function(){
      $("#jq_block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
         .animate( { fontSize:"24px" }, 1500 )
         .animate( { borderRightWidth:"15px" }, 1500);
    });

    $("#jq_go2").click(function(){
      $("#jq_block2").animate( { width:"90%"}, 1000 )
         .animate( { fontSize:"24px" } , 1000 )
         .animate( { borderLeftWidth:"15px" }, 1000);
    });

    $("#jq_go3").click(function(){
      $("#jq_go1").add("#jq_go2").click();
    });

    $("#jq_go4").click(function(){
      $("#jq_step7 div").css({width:"", fontSize:"", borderWidth:""});
    });
    // -----------------------------
    $("#jq_title7").click(
        function () {
          $("#jq_step7").hide("slow");
          $("#jq_step1").show("slow");
    });
    // -----------------------------
  });
</script>
</body>
</html>